<template>
    <div id="box1">
        <!-- <h2>添加学生</h2> -->
        <brand></brand>
        <div id="container">
            <div id="box2">
                <div id="top">
                    学生姓名：<input type="text" class="input" v-model="name" />
                </div>
                <div>
                    学生年龄：<input type="text" class="input" v-model="age" />
                </div>
                <div>
                    学生性别：<input type="radio" value="男" v-model="sex" /> 男
                    &nbsp;&nbsp;&nbsp;&nbsp;<input
                        type="radio"
                        value="女"
                        v-model="sex"
                    />
                    女
                </div>
                <div>
                    学生专业：
                    <select name="" id="" v-model="subjectId">
                        <option value="">请选择</option>
                        <option
                            :value="item._id"
                            v-for="item in subjects"
                            :key="item._id"
                        >
                            {{ item.name }}
                        </option>
                    </select>
                </div>
                <div>
                    学生班级：
                    <select name="" id="" v-model="classesId">
                        <option value="">请选择</option>
                        <option
                            :value="item._id"
                            v-for="item in classes"
                            :key="item._id"
                        >
                            {{ item.name }}
                        </option>
                    </select>
                </div>
                <div><button @click="addStudent()">确认添加</button></div>
            </div>
            <div id="box4">
                <div v-if="image==''">点击右边 + 号上传图片</div>
                <img :src="image" alt="" v-if="image!=''">
            </div>
            <div id="box3">
                <a href="javascript:;" class="file">
                    + <br /><input
                        type="file"
                        name=""
                        id=""
                        @change="uploadImg"
                /></a>
            </div>
        </div>
    </div>
</template>

<script>
import brand from "../common/brand.vue";
import axios from "axios";

export default {
    components: {
        brand,
    },
    data() {
        return {
            students: [],
            classes: [],
            classesId: "",
            subjects: [],
            subjectId: "",
            name: "",
            age: "",
            sex: "",
            image:''
        };
    },
    created() {
        this.getSubjects();
    },
    watch: {
        subjectId: {
            handler() {
                // 当侦听的数据发生变化时要执行的操作...
                this.getClassesBySubjectId();
            },
            deep: true, // 深度侦听
        },
    },
    methods: {
        //上传图片
        async uploadImg(e) {
            let files = e.target.files;
            //新建formdata对象，将文件加入其中
            let fd = new FormData();
            fd.append("file", files[0]);
            //可以用fd.get()来获得保存的数据
            //console.log(fd.get('file'));
            let {data} = await axios({
                url: "/images/uploadImages",
                method: "POST",
                data: fd,
            });
            console.log(data.data);
            this.image = data.data[0];
        },

        //获取专业
        async getSubjects() {
            const { data } = await this.$api.subjects.getSubjects();
            // console.log(data.data.rows);
            this.subjects = data.data.rows;
        },

        //获取专业对应的班级
        async getClassesBySubjectId() {
            const { data } = await this.$api.classes.getClassesBySubjectsId(
                this.subjectId
            );
            // console.log(data);
            if(data.data){
                this.classes = data.data.rows;
            }
        },

        //添加学生
        async addStudent() {
            if (this.name != "" && this.age != "" && this.sex != "") {
                // 封装后
                await this.$api.students.addStudents(
                    this.name,
                    this.age,
                    this.sex,
                    this.classesId,
                    this.subjectId,
                    this.image
                );

                console.log(this.name, this.age, this.sex);

                //添加学生列表清空
                this.name = "";
                this.age = "";
                this.sex = "";
                this.classesId = '',
                this.subjectId = '',
                this.image = ''
                alert("添加学生成功！");
                //添加之后再获取学生
                // this.getStudents();
            } else {
                alert("信息不能为空！");
            }
        },
    },
};
</script>

<style lang='scss' scoped>
h2 {
    margin: 0;
    margin-bottom: 20px;
}
#container {
    display: flex;
}
#box4{
    width: 200px;
    height: 200px;
    margin-top: 50px;
    margin-left: 50px;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    // line-height: 200px;
    div{
        width: 100%;
        text-align: center;
    }
    img{
        width: 100%;
    }
}
#box3 {
    display: flex;
    align-items: center;
    width: 200px;
    height: 200px;
    padding: 50px;
    .file {
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-block;
        background: #d0eeff;
        border: 1px solid #99d3f5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1e88c7;
        text-decoration: none;
        // text-indent: 0;
        line-height: 200px;
        text-align: center;
        font-size: 50px;
        cursor: pointer;
    }
    .file input {
        width: 100%;
        height: 100%;
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
    .file:hover {
        background: #aadffd;
        border-color: #78c3f3;
        color: #004974;
        text-decoration: none;
    }
}
#box2 {
    padding-left: 50px;
    > div {
        margin: 20px 0;
        .input {
            width: 350px;
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0;
            padding-left: 10px;
            margin: 0;
            outline: none;
        }
        input:focus {
            border: 1px solid #2f54eb;
            box-shadow: 0px 0px 0 1px #bde7ff, 0px 0px 0 1px #bde7ff;
        }
        button {
            width: 100px;
            height: 40px;
            background-color: #2f54eb;
            outline: none;
            border: none;
            color: #fff;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            &:hover {
                background-color: #5976ef;
            }
        }
        &:last-child {
            margin-top: 20px;
        }
        select {
            width: 360px;
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0;
            padding-left: 10px;
            margin: 0;
            outline: none;
        }
    }
    #top{
        margin-top: 0;
    }
}
</style>